/* 头部 */
.head {
  //width: 100%;
  width: 3.325rem;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 0.5rem;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, .1);
  background-color: #fff;
  z-index: 999;

  span {
    position: absolute;
    top: 0.15rem;
    left: 0;
  }

  .title-img {
    width: 1.1rem;
    margin: 0 auto;
    padding-top: 0.15rem;

    a {
      display: block;
      width: 100%;
      height: 100%;

      img {
        display: block;
        width: 100%;
      }
    }
  }

  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: -0.21rem;
    width: 0.22rem;
    height: 100%;
    background-color: #fff;
    z-index: 9999;
  }
  &::before {
    content: "";
    position: absolute;
    top: 0;
    right: -0.11rem;
    width: 0.22rem;
    height: 100%;
    background-color: #fff;
    z-index: 9999;
  }
}

/* 四个项目 */
nav {
  margin-top: 0.675rem;

  ul {
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;

    li {
      flex: 0 0 48%;
      border-radius: 0.05rem;
      padding-bottom: 0.06rem;
      margin-bottom: 0.215rem;

      a {
        display: block;
        width: 100%;
        height: 100%;

        img {
          display: block;
          width: 100%;
        }

        h2 {
          color: #333;
          font-size: 0.15rem;
          margin-top: 0.1rem;
          margin-left: 0.075rem;
        }

        span {
          color: #ff813c;
          font-size: 0.1rem;
          //vertical-align: middle;
          margin-top: 0.075rem;
          //line-height: 0.12rem;
          margin-right: 0.1rem;

          img {
            display: inline-block;
            width: 0.1rem;
            height: 0.12rem;
            vertical-align: text-bottom;
            margin-right: 0.035rem;
          }
        }

        p {
          clear: both;
          font-size: 10px;
          color: #666;
          margin-bottom: 0;
          margin-left: 0.075rem;

          i {
            color: #f91b0c;
          }
        }
      }
    }
  }
}


/* 猜你喜欢 */
.like {
  /* 标题 */

  .like-title {
    height: 0.11rem;
    background: url("../images/thousand/like_title_img.png") no-repeat center center;
    background-size: contain;
  }

  /* 热门项目 */

  /* 标题 */

  .hot-title {
    border-bottom: 1px solid #e1dede;
    //padding-bottom: 0.15rem;
    li {
      display: inline-block;
      border-bottom: 2px solid #fe1818;
      padding-bottom: 0.15rem;
    }
  }

  /* 内容 */

  .hot-cont {
    li {
      padding-top: 0.15rem;
      padding-bottom: 0.135rem;
      border-bottom: 1px solid #e1dede;
      position: relative;
      //display: flex;
      //justify-content: space-between;

      img {
        height: 1.055rem;
        display: inline-block;
        margin-right: 0.07rem;
        vertical-align: middle;
      }

      .r-cont {
        display: inline-block;
        vertical-align: middle;
        //font-size: 0;

        h2 {
          font-size: 15px;
          color: #333;
          display: inline-block;
          margin-right: 0.05rem;
          margin-bottom: 0.15rem;
        }

        span {
          font-size: 0.11rem;
          color: #fd8815;
          padding: 0.02rem 0.03rem;
          border-radius: 15px;
          border: solid 1px #ff9126;
          margin-right: 0.05rem;
        }

        p {
          font-size: 12px;
          line-height: 12px;

          &:nth-of-type(1) {
            color: #999;
          }

          &:nth-of-type(2) {
            img {
              vertical-align: middle;
              width: 12px;
              height: 12px;
              margin-right: 7px;
            }

            i {
              color: #333;
              vertical-align: middle;
            }
          }

          &:nth-of-type(3) {
            color: #ff5050;
          }
        }

        a {
          display: inline-block;
          padding: 0.065rem 0.15rem;
          color: #fff;
          font-size: 12px;
          background-image: linear-gradient(207deg,
          #ff4b33 0%,
          #ff4431 0%,
          #ff3d2e 0%,
          #ff2922 54%,
          #fe1818 100%),
          linear-gradient(
                  #f65353,
                  #f65353);
          background-blend-mode: normal,
          normal;
          box-shadow: 2px 2px 9px 0px rgba(218, 20, 20, 0.33),
          inset 0px 3px 7px 0px rgba(255, 88, 75, 0.44);
          border-radius: 25px;
          position: absolute;
          bottom: 0.19rem;
          right: 0.2rem;
        }
      }
    }
  }

  .load-more {
    display: block;
    font-size: 12px;
    color: #424242;
    padding: 0.17rem 0;
    text-align: center;
  }
}
